import React, { useState, useEffect } from 'react'
import Header from '../../components/Header/Header'
import './shop.less'
import { reqcartlist, reqcartupdate, reqcartdel } from '../../request/api'
import { imgPre } from '../../request/http'
import { filterPrice } from '../../filters/index'
import { Toast } from 'antd-mobile'

let isRequset = true;
function Shop() {
  const [cartlist, setcartList] = useState([])
  const [cartAll,setcartAll]=useState(false)
  // 请求购物车列表
  const requsetCartList = () => {
    reqcartlist({ uid: JSON.parse(localStorage.getItem('isLogin')).uid }).then(res => {
      if (res.data.code == 200) {
        let list = res.data.list[1] ? res.data.list[1].content : res.data.list[2].content
        
        list.forEach(item=>{
          let obj = cartlist.find(i=>i.id==item.id)
          item.checked=obj?obj.checked:false
        })

        //修改全选  如果删除所有改变checked
        setcartAll(list.length>0?list.every(item=>item=item.checked):false) 

        setcartList(list)
        // 下一次请求
        isRequset = true
      }
    })
  }
  useEffect(() => {
    requsetCartList()
  }, [])
  // 删除购物车
  const cartdel = (id) => {
    reqcartdel({ id }).then(res => {
      if (res.data.code == 200) {
        Toast.show({
          content: res.data.msg
        })
        requsetCartList()
      }
    })
  }
  // 购物车++
  const sum = (id) => {
    reqcartupdate({ id, type: 2 }).then(res => {
      if (res.data.code == 200) {
        requsetCartList()
      }
    })
  }
  // 购物车--
  const sub = (id, num) => {
    if (num <= 1) {
      Toast.show({
        content: '宝贝不能再少啦'
      })
      return
    }
    // 节流思想，判断是否为真，为true进去 改变false  找到请求完列表再将改变为true，否则就一直为false
    if (isRequset) {
      isRequset = false;
      reqcartupdate({ id, type: 1 }).then(res => {
        if (res.data.code == 200) {
          requsetCartList()
        }
      })
    }
  }
  // 单选
  const changOne=(e,index)=>{
    cartlist[index].checked=e.target.checked
    setcartList([...cartlist])
    // 改变全选
    setcartAll(cartlist.every(item=>item=item.checked))
  }
  // 全选
  const changeAll=(e)=>{
    let newStatus=e.target.checked;
    setcartAll(newStatus)
    // 修改单选
    cartlist.forEach(item=>item.checked=newStatus)
    setcartList([...cartlist])
  }
console.log('改变了。。。');
  // 总价
  let totail=0;
  cartlist.forEach(item=>{
    if(item.checked){
      totail+=item.price*item.num
    }
  })
  return (
    <div>
      <Header title={'购物车'} back></Header>
      <div className="shoplist">
        {
          cartlist.map((item, index) => {
            return (
              <div className="shopone" key={item.id}>
                <div className='shop-img'>
                  <input type="checkbox" name="" id="" checked={item.checked} onChange={(e)=>changOne(e,index)}/>
                  <img src={imgPre + item.img} alt="" />
                </div>
                <div className="info">
                  <h3>{item.goodsname}</h3>
                  <p>￥{filterPrice(item.price)} </p>
                  <button onClick={() => sub(item.id, item.num)}>-</button><b> {item.num} </b><button onClick={() => sum(item.id)}>+</button>

                </div>
                <span className='del' onClick={() => cartdel(item.id)}>删除</span>
              </div>

            )
          })
        }

        <div className='totals'>
          全选 <input type="checkbox" name='' checked={cartAll} onChange={(e)=>changeAll(e)}/>
          <span>合计:{filterPrice(totail)}</span>
        </div>
      </div>
    </div>
  )

}

export default Shop
